<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="./css/index.css" />
		<link rel="stylesheet" href="./css/reset.css" />
		<link rel="stylesheet" href="./css/base.css" />
		<link rel="stylesheet" href="../font/css/all.css" />
	</head>

	<body>
		<!--顶部导航条-->
		<!--顶部导航条外部容器-->
		<div class="top-bar-wrapper">
			<!--创建内部容器-->
			<div class="top-bar w">
				<!--左边的导航-->
				<ul class="service">
					<li>
						<a href="javascript:;">小米商城</a>
					</li>
					<li class="line">|</li>

					<li>
						<a href="javascript:;">MIUI</a>
					</li>
					<li class="line">|</li>

					<li>
						<a href="javascript:;">loT</a>
					</li>
					<li class="line">|</li>

					<li>
						<a href="javascript:;">云服务</a>
					</li>
					<li class="line">|</li>

					<li>
						<a href="javascript:;">天星数科</a>
					</li>
					<li class="line">|</li>

					<li>
						<a href="javascript:;">有品</a>
					</li>
					<li class="line">|</li>

					<li>
						<a href="javascript:;">小爱开放平台</a>
					</li>
					<li class="line">|</li>

					<li>
						<a href="javascript:;">企业团购</a>
					</li>
					<li class="line">|</li>

					<li>
						<a href="javascript:;">资质证照</a>
					</li>
					<li class="line">|</li>

					<li>
						<a href="javascript:;">协议规则</a>
					</li>
					<li class="line">|</li>

					<li>
						<a class="app" href="javascript:;">下载app
							<!--添加一个弹出层-->
							<div class="qrcode">
								<img src="img/download.png" alt="" />
								<span>小米商城app</span>
							</div>
						</a>
					</li>
					<li class="line">|</li>

					<li>
						<a href="javascript:;">智能生活</a>
					</li>
					<li class="line">|</li>

					<li>
						<a href="javascript:;">Select Location</a>
					</li>

				</ul>
				<!--购物车-->
				<ul class="shop-cart">
					<li>
						<a href="javascript:;">
							<i class="fas fa-shopping-cart"></i> 购物车（0）
							<div class="shopping-cart-menu">
								<div class="menu-content">购物车中还没有商品，赶紧选购吧！</div>
							</div>
						</a>
					</li>
				</ul>
				<!--登录注册-->
				<ul class="user-info">
					<li>
						<a href="javascript:;">登录</a>
					</li>
					<li class="line">|</li>

					<li>
						<a href="javascript:;">注册</a>
					</li>
					<li class="line">|</li>

					<li>
						<a href="javascript:;">消息通知</a>
					</li>
				</ul>
			</div>
		</div>
		<!--创建一个头部的外部容器-->
		<div class="header-wrapper">
			<div class="header w clearfix">
				<h1 class="logo" title="小米">
					<!--小米官网-->
					<a href="/"></a>
				</h1>

				<!--创建一个中间导航条的容器-->
				<div class="nav-wrapper">
					<!--创建导航条-->
					<ul class="nav clearfix">
						<li class="all-goods-wrapper">
							<a class="all-goods" href="#">全部商品</a>
							<!--创建一个左侧导航菜单-->
							<ul class="left-menu">
								<li>
									<a href="#">手机 电话卡
										<i class="fas fa-angle-right"></i>
									</a>
								</li>
								<li>
									<a href="#">电视 盒子
										<i class="fas fa-angle-right"></i>
									</a>
								</li>
								<li>
									<a href="#">笔记本 平板
										<i class="fas fa-angle-right"></i>
									</a>
								</li>
								<li>
									<a href="#">家电 插线板
										<i class="fas fa-angle-right"></i>
									</a>
								</li>
								<li>
									<a href="#">出行 穿戴
										<i class="fas fa-angle-right"></i>
									</a>
								</li>
								<li>
									<a href="#">智能 路由器
										<i class="fas fa-angle-right"></i>
									</a>
								</li>
								<li>
									<a href="#">电源 配件
										<i class="fas fa-angle-right"></i>
									</a>
								</li>
								<li>
									<a href="#">健康 儿童
										<i class="fas fa-angle-right"></i>
									</a>
								</li>
								<li>
									<a href="#">耳机 音箱
										<i class="fas fa-angle-right"></i>
									</a>
								</li>
								<li>
									<a href="#">生活 箱包
										<i class="fas fa-angle-right"></i>
									</a>
								</li>
							</ul>
						</li>
						
						
						<li class="show-goods">
							<a href="#">小米手机</a>
						</li>
						<li class="show-goods">
							<a href="#">Redmi 红米</a>
						</li>
						<li class="show-goods">
							<a href="#">电视</a>
						</li>
						<li class="show-goods">
							<a href="#">笔记本</a>
						</li>

						<li class="show-goods">
							<a href="#">家电</a>
						</li>
						<li class="show-goods">
							<a href="#">路由器</a>
						</li>
						<li class="show-goods">
							<a href="#">智能硬件</a>
						</li>
						<li>
							<a href="#">服务</a>
						</li>
						<li>
							<a href="#">社区</a>
						</li>

						<!--设置弹出层-->
						<div class="goods-info"></div>
					</ul>
				</div>

				<!--创建搜索框的容器-->
				<div class="search-wrapper">
					<form class="search" action="#">
						<input class="search-inp" type="text" />
						<button class="search-btn">
							<i class="fas fa-search"></i>
						</button>

					</form>
				</div>
			</div>
		</div>

		<!--创建banner的容器-->
		<div class="banner-wrapper">
			<div class="banner w">
				<ul class="img-list">
					<li>
						<a href="javascript:;">
							<img src="img/banner1.webp"/>
						</a>
					</li>
					<li>
						<a href="javascript:;">
							<img src="img/banner2.webp"/>
						</a>
					</li>
					<li>
						<a href="javascript:;">
							<img src="img/banner3.jpg"/>
						</a>
					</li>
				</ul>
				
				<div class="pointer">
					<a class="active" href="javascript:;"></a>
					<a href="javascript:;"></a>
					<a href="javascript:;"></a>
				</div>
				
				
				<!--图标-->
				<div class="prev-next">
					<a class="prev" href="javascript:;"></a>
					<a class="next" href="javascript:;"></a>
				</div>
			</div>
		</div>
	
		<div class="back-top">
			<ul class="phone">
				<li>
					<a href="javascript:;">
						<img src="img/phone.png"/>
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<img src="img/personal.png"/>
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<img src="img/fix.png"/>
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<img src="img/service.png"/>
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<img src="img/shopping-cart.png"/>
					</a>
				</li>
			</ul>
		</div>
	
		<!--创建广告容器-->
		<div class="ad ">
			<ul class="shortcut">
				<li>
					<a href="javascript:;">
						<i class="fas fa-clock"></i>
						小米秒杀
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<i class="fas fa-building"></i>
						企业团购
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<i class="fas fa-chart-line"></i>
						F码通道
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<i class="fas fa-save"></i>
						米粉卡
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<i class="fas fa-yen-sign"></i>
						以旧换新
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<i class="fas fa-tablet-alt"></i>
						话费充值
					</a>
				</li>
			</ul>
		
		
			<ul class="ad-img"> 
				<li>
					<a href="#">
						<img src="img/ad1.jpg"/>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="img/ad2.jpg"/>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="img/ad3.png "/>
					</a>
				</li>
			</ul>
		</div>
	</body>

</html>